<template>
	<view>
		<view class="u-margin-30">
			<view class="u-font-52">Hello，欢迎登录</view>
			<view class="">还没账号？ <text class="text-red u-font-b" @click="goRegister">立即注册</text></view>
		</view>
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx',padding: '0 30rpx'}" right-icon="kefu-ermai" :label-position="labelPosition" label-align="center" label="手机号码" prop="phone" label-width="150">
				<u-input placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
			</u-form-item>
			<u-form-item  :label-position="labelPosition" label="验证码" label-align="center" prop="code" label-width="150">
				<u-input placeholder="请输入验证码" v-model="model.code" type="text"></u-input>
				<view slot="right" class="u-margin-right-30">
					<u-button size="mini" :style="[yzmStyle]" @click="getCode">{{codeTips}}</u-button>
				</view>
			</u-form-item>
		</u-form>
		<view class="u-margin-30">
			<u-button
			:loading="loading"
			:style="[inputStyle]"
			:disabled="disabled"
			:custom-style="disabled ? Style : customStyle" 
			:hair-line="false" 
			:ripple="true" 
			:ripple-bg-color="rippleBg"
			 @click="submit">{{loading? '登录中' : '登录'}}</u-button>
			 <view class="u-f-ajc u-margin-top-60" @click="empty">
			 	收不到验证码
			 </view>
		</view>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					phone: '',
					code: ''
				},
				rules: {
					phone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						}
					],
					code: [
						{
							required: true,
							message: '请输入验证码',
							trigger: ['change','blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change','blur'],
						}
					]
				},
				codeTips: '',
				labelPosition: 'left',
				errorType: ['toast'],
				disabled:true,
				loading:false,
				// 按钮css样式
				rippleBg:'rgba(255,255,255,0.3)',
				customStyle: {
					height:'100rpx',
					backgroundColor:'#191d19',
					boxShadow:'0 12rpx 20rpx -8rpx rgba(28, 34, 28, 0.3)',
					fontSize:'32rpx',
					fontWeight:'bold',
					color:'#FFF',
					marginTop:'90rpx'
				},
				Style: {
					height:'100rpx',
					backgroundColor:'rgb(123,125,123)',
					boxShadow:'0 12rpx 20rpx -8rpx rgba(28, 34, 28, 0.3)',
					fontSize:'32rpx',
					fontWeight:'bold',
					color:'#FFF',
					marginTop:'90rpx'
				}
			}
		},
		computed: {
			// 判断input是否输入了
			inputStyle() {
				if(this.$u.test.mobile(this.model.phone)) {
					if(this.model.code){
						this.disabled = false
					}else{
						this.disabled = true
					}
				}
			},
			yzmStyle() {
				let style = {};
				if(this.$u.test.mobile(this.model.phone)) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['success'];
				}
				return style;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.loading = true;
						setTimeout(() => {
							this.loading = false;
							this.$u.toast('登录成功');
						}, 2000);
						// if(!this.model.agreement) return this.$u.toast('请勾选协议');
					} else {
						this.loading = true;
						setTimeout(() => {
							this.loading = false;
							this.$u.toast('验证失败，请重新再试');
						}, 2000);
					}
				});
			},
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if(this.$u.test.mobile(this.model.phone)){
					if(this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						});
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				}
			},
			empty(){
				this.$u.toast('请重新输入手机号或验证');
			},
			goRegister(){
				uni.navigateTo({
					url: 'register/register',
				});
			}
		}
	}
</script>

<style>
	page{
		 background-color: #FFFFFF !important;
	}
</style>
<style lang="scss" scoped>
	.u-margin-30{
		margin: 60rpx 30rpx !important;
		line-height: 62rpx;
	}
</style>
